$prefix-form-switch: $prefix + 'form-switch';

.#{$prefix-form-switch} {
    @apply inline-flex items-center cursor-pointer;

    &-input {
        @apply sr-only;
    }

    &-inner {
        @apply relative w-11 h-6 bg-gray-200 rounded-full dark:bg-gray-700 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-gray-600;
    }

    &-input:focus~&-inner {
        @apply outline-none ring-4 ring-blue-300 dark:ring-blue-800;
    }

    &-input:checked~&-inner {
        @apply after:translate-x-full rtl:after:-translate-x-full after:border-white bg-blue-600;
    }

    &-label {
        @apply ms-3 text-sm text-gray-500 dark:text-gray-400;
    }
}